<template>
  <div ref="Wrapeer" class="lateralWrapeer">
    <!-- 插槽用于放内容，使用此组件，只要在外面定义的内容宽度够宽就可以滚动 -->
    <slot ref="Content" name="lateralContent"></slot>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  name: "lateralScroll",
  inject: ["reload"],
  data() {
    return {
      scroll: null,
    };
  },
  props: {
    Contentlength: {
      type: Number,
      default: 100,
    },
  },
  // watch: {
  //   data(newValue, oldValue) {

  //   }
  // },
  methods: {
    refresh() {
      this.scroll.refresh();
      // // this.componentKey++
      // this.$forceUpdate();
      // console.log('您调用了better-scroll的refresh')
    },
    lateralScroll() {
      let that = this;
      // setTimeout(() => {
        this.$nextTick().then(()=>{
          if (!that.scroll) {
          that.scroll = new BScroll(that.$refs.Wrapeer, {
            scrollX: true, //这两个配置使用竖向滚动的时候可以不配置，横向滚动一定要配置，原因记录：https://segmentfault.com/a/1190000039679054
            scrollY: false,
             pullDownRefresh: true,//开启监听pullDown
             pullUpLoad: true,//
            //配置鼠标滚动，页面控制
            mouseWheel: {
              speed: 20,
              invert: false,
              easeTime: 300,
            },
            eventPassthrough: "vertical", //横向滚动
            disableMouse: false, //启用鼠标拖动
            disableTouch: false, //启用手指触摸
            probeType: 3, //实时监听
            //设置html传统样式可点击
            click: true,
            cancelable: false,
          });
        }
        })
        
      // }, 20);
    },
    //对比当前元素位置做出移动
    scrollBy(x, y, time = 500) {
      this.scroll.scrollBy(x, y, time);
      // console.log(x, y);
    },
  },
  mounted() {},
  activated() {
    let that = this;
    this.$eventBus.$on("lateralRefresh", (msg) => {
      //  console.log("666")
      //  console.log("监听到homeswiper发来的信息："+msg)
      //  console.log(msg=='快点refresh!')
      if (msg == "快点refresh!") {
        //  console.log("ok,立马refresh！");
        //  that.reload()//重新渲染无效？？？
        that.refresh();
      }
    });
      that.lateralScroll();
    this.$nextTick().then(() => {
      // console.log("9999")
    
      if (that.scroll != null) {
      that.scroll.on("scroll", (position) => {
        that.$emit("scroll", position);
        // console.log("888")监听滚动
      });

      that.scroll.on("pullingDown", () => {
        console.log("哎呀")
      });
        that.scroll.on("pullingUp", () => {
        console.log("哎呀")
      });
    }
    });
    
  },
};
</script>

<style lang="less" scoped>
.lateralWrapeer {
  width: 100%;
  touch-action: none;
  overflow: hidden;
}
</style>